<template>
  <div class="order-info-container">
    <h1>订单信息</h1>
    
    <div class="search-bar">
      <input 
        type="text" 
        v-model="searchQuery" 
        placeholder="搜索订单号、商品名称或状态..." 
        @input="handleSearch"
      />
      <button class="search-button">
        <i class="icon-search"></i>
      </button>
    </div>
    
    <div class="filter-buttons">
      <button @click="filterByStatus('all')" :class="{ active: currentFilter === 'all' }">全部</button>
      <button @click="filterByStatus('待付款')" :class="{ active: currentFilter === '待付款' }">待付款</button>
      <button @click="filterByStatus('待发货')" :class="{ active: currentFilter === '待发货' }">待发货</button>
      <button @click="filterByStatus('待收货')" :class="{ active: currentFilter === '待收货' }">待收货</button>
      <button @click="filterByStatus('已完成')" :class="{ active: currentFilter === '已完成' }">已完成</button>
      <button @click="filterByStatus('已取消')" :class="{ active: currentFilter === '已取消' }">已取消</button>
    </div>
    
    <div v-if="filteredOrders.length === 0" class="empty-message">
      没有找到匹配的订单
    </div>
    
    <div v-else class="orders-list">
      <div v-for="order in paginatedOrders" :key="order.orderId" class="order-card">
        <div class="order-header">
          <div class="order-info-left">
            <span class="order-id">订单号: {{ order.orderId }}</span>
            <span class="order-date">下单时间: {{ order.orderDate }}</span>
          </div>
          <div class="order-status" :class="getStatusClass(order.status)">
            {{ order.status }}
          </div>
        </div>
        
        <div class="order-items">
          <div v-for="item in order.items" :key="item.code" class="order-item">
            <div class="item-image">
              <img src="/src/assets/img/image.png" :alt="item.name">
            </div>
            <div class="item-info">
              <h3>{{ item.name }}</h3>
              <p class="item-category">{{ item.category }} | {{ item.attribute }}</p>
              <p class="item-price">¥{{ item.price }} × {{ item.quantity }}</p>
            </div>
          </div>
        </div>
        
        <div class="order-footer">
          <div class="order-total">
            <span>共{{ getTotalItems(order) }}件商品</span>
            <span class="total-price">合计: ¥{{ getTotalPrice(order) }}</span>
          </div>
          <div class="order-actions">
            <button v-if="order.status === '待付款'" @click="payOrder(order)" class="action-button pay-btn">
              立即付款
            </button>
            <button v-if="order.status === '待收货'" @click="confirmReceive(order)" class="action-button confirm-btn">
              确认收货
            </button>
            <button v-if="order.status === '待付款'" @click="cancelOrder(order)" class="action-button cancel-btn">
              取消订单
            </button>
            <button v-if="order.status === '已完成'" @click="reviewOrder(order)" class="action-button review-btn">
              评价订单
            </button>
            <button @click="viewOrderDetail(order)" class="action-button detail-btn">
              订单详情
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <div class="pagination" v-if="totalPages > 1">
      <button v-for="page in totalPages" :key="page" @click="goToPage(page)" :class="{ active: currentPage === page }">{{ page }}</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderInfo',
  data() {
    return {
      orders: [
        {
          orderId: 'ORD20230501001',
          orderDate: '2023-05-01 14:30:25',
          status: '已完成',
          items: [
            { code: '001', name: '男士休闲衬衫', attribute: 'L码/蓝色', category: '服装', price: '129.00', quantity: 1 },
            { code: '004', name: '棒球帽', attribute: '均码/红色', category: '配饰', price: '89.00', quantity: 2 }
          ]
        },
        {
          orderId: 'ORD20230510002',
          orderDate: '2023-05-10 09:15:36',
          status: '待收货',
          items: [
            { code: '006', name: '智能手机', attribute: '128GB/黑色', category: '电子', price: '3999.00', quantity: 1 }
          ]
        },
        {
          orderId: 'ORD20230515003',
          orderDate: '2023-05-15 16:42:18',
          status: '已完成',
          items: [
            { code: '008', name: '平板电脑', attribute: '64GB/银色', category: '电子', price: '2599.00', quantity: 1 },
            { code: '009', name: '无线耳机', attribute: '白色/降噪', category: '电子', price: '799.00', quantity: 1 }
          ]
        },
        {
          orderId: 'ORD20230520004',
          orderDate: '2023-05-20 11:05:47',
          status: '待付款',
          items: [
            { code: '010', name: '4K智能电视', attribute: '55英寸', category: '家电', price: '3299.00', quantity: 1 }
          ]
        },
        {
          orderId: 'ORD20230525005',
          orderDate: '2023-05-25 18:30:12',
          status: '待发货',
          items: [
            { code: '002', name: '女士牛仔裤', attribute: 'M码/黑色', category: '服装', price: '199.50', quantity: 1 },
            { code: '005', name: '智能手表', attribute: '黑色/防水', category: '配饰', price: '899.00', quantity: 1 }
          ]
        },
        {
          orderId: 'ORD20230601006',
          orderDate: '2023-06-01 10:20:33',
          status: '已取消',
          items: [
            { code: '003', name: '运动跑鞋', attribute: '42码/白色', category: '鞋类', price: '459.00', quantity: 1 }
          ]
        },
        {
          orderId: 'ORD20230605007',
          orderDate: '2023-06-05 14:55:21',
          status: '已完成',
          items: [
            { code: '012', name: '滚筒洗衣机', attribute: '8kg/变频', category: '家电', price: '2599.00', quantity: 1 }
          ]
        },
        {
          orderId: 'ORD20230610008',
          orderDate: '2023-06-10 09:10:45',
          status: '待收货',
          items: [
            { code: '007', name: '轻薄笔记本', attribute: '16GB/512GB', category: '电子', price: '5999.00', quantity: 1 },
            { code: '018', name: '智能台灯', attribute: 'LED/护眼', category: '家电', price: '199.00', quantity: 2 }
          ]
        },
        {
          orderId: 'ORD20230615009',
          orderDate: '2023-06-15 16:30:27',
          status: '已完成',
          items: [
            { code: '019', name: '女士连衣裙', attribute: 'S码/红色', category: '服装', price: '259.00', quantity: 1 }
          ]
        },
        {
          orderId: 'ORD20230620010',
          orderDate: '2023-06-20 11:45:38',
          status: '待发货',
          items: [
            { code: '020', name: '男士夹克', attribute: 'XL码/黑色', category: '服装', price: '399.00', quantity: 1 },
            { code: '004', name: '棒球帽', attribute: '均码/红色', category: '配饰', price: '89.00', quantity: 1 }
          ]
        }
      ],
      currentPage: 1,
      itemsPerPage: 4,
      searchQuery: '',
      currentFilter: 'all'
    };
  },
  computed: {
    filteredOrders() {
      let result = this.orders;
      
      // 应用状态筛选
      if (this.currentFilter !== 'all') {
        result = result.filter(order => order.status === this.currentFilter);
      }
      
      // 应用搜索筛选
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(order => 
          order.orderId.toLowerCase().includes(query) || 
          order.status.toLowerCase().includes(query) ||
          order.items.some(item => 
            item.name.toLowerCase().includes(query) || 
            item.category.toLowerCase().includes(query)
          )
        );
      }
      
      return result;
    },
    paginatedOrders() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.filteredOrders.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.filteredOrders.length / this.itemsPerPage);
    }
  },
  methods: {
    goToPage(page) {
      this.currentPage = page;
    },
    filterByStatus(status) {
      this.currentFilter = status;
      this.currentPage = 1; // 重置到第一页
    },
    handleSearch() {
      this.currentPage = 1; // 搜索时重置到第一页
    },
    getTotalItems(order) {
      return order.items.reduce((total, item) => total + item.quantity, 0);
    },
    getTotalPrice(order) {
      return order.items.reduce((total, item) => total + parseFloat(item.price) * item.quantity, 0).toFixed(2);
    },
    getStatusClass(status) {
      switch(status) {
        case '待付款': return 'status-pending-payment';
        case '待发货': return 'status-pending-shipment';
        case '待收货': return 'status-pending-receipt';
        case '已完成': return 'status-completed';
        case '已取消': return 'status-cancelled';
        default: return '';
      }
    },
    payOrder(order) {
      if (confirm(`确认支付订单 ${order.orderId}?`)) {
        // 在实际应用中，这里应该跳转到支付页面
        order.status = '待发货';
        alert('支付成功，订单状态已更新为待发货');
      }
    },
    confirmReceive(order) {
      if (confirm(`确认已收到订单 ${order.orderId} 的商品?`)) {
        order.status = '已完成';
        alert('确认收货成功，订单状态已更新为已完成');
      }
    },
    cancelOrder(order) {
      if (confirm(`确认取消订单 ${order.orderId}?`)) {
        order.status = '已取消';
        alert('订单已取消');
      }
    },
    reviewOrder(order) {
      // 在实际应用中，这里应该跳转到评价页面
      alert(`即将评价订单 ${order.orderId}`);
    },
    viewOrderDetail(order) {
      // 在实际应用中，这里应该跳转到订单详情页面
      alert(`查看订单 ${order.orderId} 的详细信息`);
    }
  }
}
</script>

<style scoped>
.order-info-container {
  padding: 20px;
  text-align: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}

.search-bar {
  display: flex;
  justify-content: center;
  margin: 20px auto;
  max-width: 600px;
  position: relative;
}

.search-bar input {
  width: 100%;
  padding: 12px 20px;
  padding-right: 50px;
  border: 1px solid #ddd;
  border-radius: 25px;
  font-size: 16px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.search-bar input:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 2px 10px rgba(74,144,226,0.2);
}

.search-button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  color: #666;
  cursor: pointer;
  padding: 10px;
}

.icon-search:before {
  content: "🔍";
}

.filter-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0;
}

.filter-buttons button {
  margin: 0 8px 10px;
  padding: 10px 20px;
  background-color: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 25px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-buttons button:hover {
  background-color: #e0e0e0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.filter-buttons button.active {
  background-color: #4a90e2;
  color: white;
  border-color: #4a90e2;
}

.empty-message {
  margin: 50px 0;
  font-size: 20px;
  color: #888;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.order-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: white;
  text-align: left;
}

.order-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}

.order-info-left {
  display: flex;
  flex-direction: column;
}

.order-id {
  font-weight: bold;
  margin-bottom: 5px;
}

.order-date {
  color: #666;
  font-size: 14px;
}

.order-status {
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: bold;
}

.status-pending-payment {
  background-color: #ffecb3;
  color: #ff8f00;
}

.status-pending-shipment {
  background-color: #e3f2fd;
  color: #1976d2;
}

.status-pending-receipt {
  background-color: #e8f5e9;
  color: #388e3c;
}

.status-completed {
  background-color: #e0f2f1;
  color: #00796b;
}

.status-cancelled {
  background-color: #f5f5f5;
  color: #757575;
}

.order-items {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.order-item {
  display: flex;
  gap: 15px;
}

.item-image {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 4px;
  flex-shrink: 0;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-info {
  flex-grow: 1;
}

.item-info h3 {
  margin: 0 0 5px;
  font-size: 16px;
}

.item-category {
  color: #666;
  font-size: 14px;
  margin: 5px 0;
}

.item-price {
  color: #e53935;
  font-size: 14px;
  margin: 5px 0 0;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f9f9f9;
  border-top: 1px solid #eee;
}

.order-total {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.total-price {
  font-weight: bold;
  color: #e53935;
  margin-top: 5px;
}

.order-actions {
  display: flex;
  gap: 10px;
}

.action-button {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pay-btn {
  background-color: #e53935;
  color: white;
}

.pay-btn:hover {
  background-color: #c62828;
}

.confirm-btn {
  background-color: #4caf50;
  color: white;
}

.confirm-btn:hover {
  background-color: #388e3c;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
}

.cancel-btn:hover {
  background-color: #e0e0e0;
}

.review-btn {
  background-color: #ff9800;
  color: white;
}

.review-btn:hover {
  background-color: #f57c00;
}

.detail-btn {
  background-color: #4a90e2;
  color: white;
}

.detail-btn:hover {
  background-color: #357ab8;
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.pagination button {
  margin: 0 5px;
  width: 36px;
  height: 36px;
  background-color: #f5f5f5;
  color: #333;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pagination button:hover {
  background-color: #e0e0e0;
}

.pagination button.active {
  background-color: #4a90e2;
  color: white;
}

@media (max-width: 768px) {
  .order-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .order-actions {
    margin-top: 15px;
    flex-wrap: wrap;
  }
  
  .filter-buttons button {
    padding: 8px 15px;
    margin: 0 5px 8px;
  }
  
  .search-bar {
    max-width: 90%;
  }
}

@media (max-width: 480px) {
  .order-item {
    flex-direction: column;
  }
  
  .item-image {
    width: 100%;
    height: 120px;
  }
}
</style>